<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2024-03-25 11:31:34
 * @LastEditTime: 2025-04-25 14:35:52
 * @LastEditors:  Please set LastEditors
-->
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { onLoad, onShow, onReady, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi } from '@/api'
import { getImgFullPath, getDistance, dateFormat } from '@/utils/index'
import { useUserStore, useConfigStore } from '@/store'

const userStore = useUserStore()
const configStore = useConfigStore()
const currentIndex = ref(0)
const show = ref(false)
const dataList = reactive<any>({
    pageIndex: 1,
    pageSize: 18,
    list: []
})
const status = ref('loadmore')
async function getDataList() {
    if (status.value === 'nomore') return
    status.value = 'loading'
    const { data } = await baseApi.companyList({
        pageIndex: dataList.pageIndex,
        pageSize: dataList.pageSize,
        userId: userStore.userInfo?.id
        // detail: true,
    })
    const { records, current, pages } = data
    // dataList.list.push(...records)
    dataList.list = records
    if (current < pages) {
        dataList.pageIndex += 1
    } else {
        status.value = 'nomore'
    }
}
function goUrlFn(url: any) {
    if (url) {
        uni.navigateTo({
            url
        })
    }
}
const scrollTop = ref(0)
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
})
const changeList = (index:any) => {
    currentIndex.value = index;
    show.value = false;
};
onLoad((option) => {
    getDataList()
})
onReachBottom(() => {
    getDataList()
})

</script>
<template>
    <!-- <hy-nav-bar title="事业部" v-if="!configStore.isWeChatBrowser"></hy-nav-bar> -->
    <view class="container">
        <template v-if="dataList.list.length > 0">
            <u-cell-group :border="false">
                <u-cell-item @click="show=true" :title="dataList.list[currentIndex]?.name" hover-class="cell-hover-class"   :title-style="{fontWeight:'bold',color:'#000'}">
                </u-cell-item>
 
                <view class="con">
                    <view @click="goUrlFn(`/packageA/pages/myBdManage/userList?id=${dataList.list[currentIndex]?.id}`)">
                        <image
                            src="https://wanmian.oss-cn-chengdu.aliyuncs.com/uploads/707c4d26-93d4-4b1f-8ad7-c9718811870c.png"
                            mode="widthFix" class="icon" />
                        <view>人员管理</view>
                    </view>
                    <view @click="goUrlFn(`/packageA/pages/wallet/index?isCompany=1&companyId=${dataList.list[currentIndex]?.id}`)">
                        <image
                            src="https://wanmian.oss-cn-chengdu.aliyuncs.com/uploads/dcd35698-7402-4f6f-9a8e-214d26e76a3d.png"
                            mode="widthFix" class="icon" />
                        <view>余额明细</view>
                    </view>
                    <view @click="goUrlFn(`/packageA/pages/myBdManage/bdStatics?isCompany=1&id=${dataList.list[currentIndex]?.id}`)">
                        <image
                            src="https://wanmian.oss-cn-chengdu.aliyuncs.com/uploads/4c3a9b90-80d3-46cb-8b38-61cdb150f5b5.png"
                            mode="widthFix" class="icon" />
                        <view>统计</view>
                    </view>
                </view>
            </u-cell-group>
        </template>
        <!-- <u-loadmore :status="status" v-if="dataList.list.length === 0" /> -->
        <u-popup   v-model="show" mode="bottom" border-radius="24" height="170px">
			<view class="itemSY" :class="{active: index == currentIndex }" @click="changeList(index)" v-for="(item, index) in dataList.list">{{ item.name }}</view>
		</u-popup>
    </view>
</template>
<style lang="scss" scoped>
@import '@/styles/helper.scss';

.container {
    // padding: 20rpx;

    .con {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-bottom: 40rpx;

        &>view {
            width: 25%;
            height: 140rpx;
            box-sizing: border-box;
            padding: 20rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            gap: 10rpx;
            font-size: 26rpx;

            .icon {
                width: 44rpx;
            }
        }
    }
}

:deep(.u-cell-box) {
    margin-bottom: 60rpx;
}

:deep(.u-cell-item-box) {
    border-radius: 5px;
}
.itemSY{
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 5rpx solid #fff;
    text-align: center;
    background-color: #f9f9f9;
}

.active{
    color: #fff;
    background-color: #f28b54;
}
</style>
